<!DOCTYPE html>
<!-- Camera is a Pixedelic free jQuery slideshow | Manuel Masia (designer and developer) --> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
    <title>Camera | a free jQuery slideshow by Pixedelic</title> 
    <meta name="description" content="Camera a free jQuery slideshow with many effects, transitions, adaptive layout, easy to customize, using canvas and mobile ready"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //		Styles
    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////--> 
    <link rel='stylesheet' id='camera-css'  href='css/camera.css' type='text/css' media='all'> 
  <link rel="stylesheet"  href="css/jquery.mobile.structure.css" />
  <link rel="stylesheet" href="css/jquery.mobile.theme.css" />

    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //		Scripts
    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////--> 
    
  <script src="js/lib/jquery.js"></script>
  <!-- your scripts here -->
  <script src="js/app/app.js"></script>
  <script src="js/app/bootstrap.js"></script>
  <script src="js/lib/jquery.mobile.js"></script>
   <script type='text/javascript' src='scripts/camera.min.js'></script> 
  <script src="js/jquery.easing.1.3.js"></script>
    
    <script>
		jQuery(function(){
			
			jQuery('#camera_wrap_2').camera({
				height: '400px',
				//loader: 'bar',
				pagination: false,
				thumbnails: true
			});
		});
	</script>
 
</head>
<body>
 <div data-role="page" data-add-back-btn="true" data-back-btn-text="上一頁"
data-back-btn-theme="e" id="page4">
    <div data-role="header" class="title" data-theme="a" data-position="fixed">
    <h1>Page Four</h1>
  </div>
    <div data-role="content">
     <div id="map_canvas">
     </div>
  </div>
    <div data-role="footer" data-position="fixed">
    <h1>tis is a test</h1>
  </div>
  </div>

   	<p>Thumbnails with fixed height</p>
        <div class="camera_wrap camera_magenta_skin" id="camera_wrap_2">
            <div data-thumb="images/M_favorite1.jpg" data-src="images/M_favorite1.jpg">
                <div class="camera_caption fadeFromBottom">
                    Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
                </div>
            </div>
            <div data-thumb="images/M_record.jpg" data-src="images/M_record.jpg">
                <div class="camera_caption fadeFromBottom">
                    It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                </div>
            </div>
            <div data-thumb="images/M_store1.jpg" data-src="images/M_store1.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>It's completely free</em> (even if a donation is appreciated)
                </div>
            </div>
        </div><!-- #camera_wrap_2 -->
    </div><!-- .fluid_container -->
    
    <div style="clear:both; display:block; height:100px"></div>
</body> 
</html>